import React,{Component} from 'react';
import {connect} from 'react-redux';
import 'isomorphic-fetch';
import './../Sass/home.scss';

import {postGoodList,getCateList,selCateGoods,findGoods,AddCar} from '../actions/counter'

var Home = React.createClass({
    
    getInitialState(){
        return {
            dataGoodsOri:{rows:[]},
            dataGoods:{rows:[]},
            leftListData:[]
        }
    },

    componentWillMount(){
        var self = this;
        //请求右侧商品列表
        this.props.postGoodList();
        
        //请求左侧cate
        this.props.getCateList();
        

    },
    
    


    render(){
        console.log("data_Car");
        console.log(this.props.data_Car);
        //fn
        var self = this;
        //选择商品类
        function addToCar(e){
            self.props.AddCar(e.target.getAttribute("data-product"))
        }
        function searchGoods(){
            var keyword = $("#searchGoods").val();
            self.props.findGoods(keyword);
        }

        function selGoods(e){
            $(".leftPart li p").prop("class","");
            e.target.setAttribute("class","active");
            const linkid = (e.target.getAttribute("data-key"));
            if(linkid!="all"){
                self.props.selCateGoods(linkid);
            }else{
                self.props.findGoods();
            }
            

        };
        //换页
        function pageChange(e){
            
            if(e.target.innerText>0){
                self.props.postGoodList(e.target.innerText);
            }else if(e.target.getAttribute("aria-label")=="Next"){
                if(self.props.data_ori.page+1<=self.props.data_ori.pages){
                    //页数+1 请求
                    var nextpage = self.props.data_ori.page+1;
                    self.props.postGoodList(nextpage);
                }else{
                    //保持本页
                    console.log("keep");
                }
                
            }else if(e.target.getAttribute("aria-label")=="Previous"){
                if(self.props.data_ori.page-1>0){
                    //页数-1 请求
                    var previouspage = self.props.data_ori.page-1;
                    self.props.postGoodList(previouspage);
                }else{
                    //保持本页
                    console.log("keep");
                }
            }else{
                console.log("UnknowOperate")
            }
            // self.props.postGoodList(e.target.innerText);
        }
        


 //-------------------------       
        var imageStyle = {
			width:'140px',
			height:'80px'
        }
        var col_3Style = {
            textAlign:"center",
            // background:"lightgrey",
            padding:"5px 5px 10px"
        }
        var leftulStyle = {
            listStyle:"none",
            lineHeight:"30px",
            textIndent:"20px",
            marginTop:"20px"
        }
        //left 列表
        
        if(this.props.data_cate.length>0){
            //已经赋值
            var leftListPart = this.props.data_cate[0].children.map(function(ele,index){
                console.log(ele._id);
                return(
                    <li>
                        <div>
                            <p style={{cursor:"pointer"}} data-key={ele._id}  onClick={selGoods}>{ele.title}</p>
                        </div>
                    </li>
                )
            })


        }


        //Goods商品
        const dgLen = this.props.data_goods.length;
        var showData = [];
        if(dgLen>0){ 
            // if(lists){
                var rowList = [];
                // Math.ceil向上舍入计算Rows行数
                for (var i = 0; i < Math.ceil(dgLen/4); i++) {
                    var colList = [];
                    for (var j = 0; j < 4; j++) {
                        var index= i*4+j;
                        //加上记录数判断，如果下标索引值小于总的数组长度，则进行列表显示，否则不加入数据
                        if(index<dgLen){
                            // console.log(this.state.dataGoods[index].picture)
                            var imgUrl = 'http://localhost:3000/'+this.props.data_goods[index].picture;
                            var str=JSON.stringify(this.props.data_goods[index]);
                            
                            colList.push(
                                <div key={index} className="col-lg-3" style={col_3Style}>
                                    <div style={{height:"100%",background:"#eee",paddingTop:"20px"}}>
                                        <img className="img-circle" style={imageStyle} src={imgUrl} alt="myGoods"/>
                                        <h2 style={{color:"#333",fontSize:16}}>{this.props.data_goods[index].title}</h2>
                                        <p>{this.props.data_goods[index].content}</p>
                                        <p style={{color:"red"}}><span>价格：</span><span>￥{this.props.data_goods[index].price}</span></p>
                                        <div>
                                            <div data-product={str} onClick={addToCar} className="btnAddCar"><span data-product={str} className="glyphicon glyphicon-shopping-cart"></span></div>
                                        </div>
                                        {/* <p><a className="btn btn-default" href="#" role="button" classID={classID} id={lists[index].id} onClick={this.handlerClick} >查看详情 &raquo;</a></p> */}
                                    </div>
                                </div>
                            )
                        }
                    };
                    rowList.push(
                        <div className="row" key={i}>{colList}</div>
                    )
                };
    
                showData = rowList;
    
                //列表分页处理
                const pageMaxSize = Math.ceil(this.props.data_ori.total/12);
                var pageButton=[];
                for(var i=0;i<pageMaxSize;i++){
                    
                    pageButton.push(<li><a href="javascript:void(0)" onClick={pageChange}>{i+1}</a></li>)
                }
                 
                var paginate=(
                    <nav aria-label="Page navigation">
                        <ul className="pagination">
                            <li>
                                <a href="javascript:void(0)" aria-label="Previous" onClick={pageChange}>
                                <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                                {pageButton}
                            <li>
                                <a href="javascript:void(0)" aria-label="Next" onClick={pageChange}>
                                <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                )
                // var pageMaxSize = Math.ceil(this.props.data_ori.total/12);
                // console.log(this.state.total,pageMaxSize);
                // for (var i = 1; i < pageMaxSize; i++) {
                //     pageList.push(
                //         <li key={i}><a href="#" onClick={this.handlerPageLinkClick} classID={classID} id={i}>{i}</a></li>
                //     )
                // };
    
                // pageListContent = (
                //     <nav>
                //       <ul className="pagination">
                //             {pageList}
                //       </ul>
                //     </nav>
                // )
                
            // }
        }
        
        
        return (
            <div id="home">
                <div id="carousel-example-generic" className="carousel slide" data-ride="carousel" style={{marginBottom:20}}>
                    <ol className="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" className="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>
                    <div className="carousel-inner" role="listbox">
                    <div className="item active">
                      <img src="./img/thumb1.jpg" alt="banner1"/>
                      <div className="carousel-caption">
                        <p>这是banner1</p>
                      </div>
                    </div>
                    <div className="item">
                      <img src="./img/thumb2.jpg" alt="banner2"/>
                      <div className="carousel-caption">
                        <p>这是banner2</p>
                      </div>
                    </div>
                    <div className="item">
                      <img src="./img/thumb3.jpg" alt="banner3"/>
                      <div className="carousel-caption">
                        <p>这是banner3</p>
                      </div>
                    </div>
                  </div>
                    <a className="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span className="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span className="sr-only">Previous</span>
                    </a>
                    <a className="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span className="sr-only">Next</span>
                    </a>
                    </div>
                    <div className="row">
                        <div className="col-lg-3 leftPart">
                            <div className="input-group" style={{lineHeight:"20px",marginLeft:"30px"}}>
                                <input type="text" id="searchGoods" className="form-control" placeholder="搜索商品名" aria-describedby="basic-addon2"/>
                                <span className="input-group-addon" id="basic-addon2" onClick={searchGoods}>搜索</span>
                            </div>
                            <ul style={leftulStyle}>
                            <li>
                                <div>
                                    <p style={{cursor:"pointer"}} data-key="all"  onClick={selGoods}>火爆商品</p>
                                </div>
                            </li>
                                {leftListPart}
                                
                            </ul>
                        </div>
                        <div className="col-lg-9">
                            {showData}
                            {paginate}
                        </div>
                    </div>
                    
            </div>
        )
    }
})

const getValue = (state)=>{
    var dataCate=[];
    state.dataCate.map(function(ele,index){
        if(ele.type==3){
            dataCate.push(ele);
        }
    })
    return {
        data_ori:state.dataGoodsOri,
        data_goods:state.dataGoods,
        data_cate:dataCate,
        data_Car:state.dataCar
    }
}

const homeContent = connect(
    getValue,
    {postGoodList,getCateList,selCateGoods,findGoods,AddCar}
)(Home)

module.exports = homeContent;